<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-10 18:28:38
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-05-26 10:26:39
 * @FilePath: \ant-design-vue-jeecg-master\src\views\situationDisplay\modules\SXZY.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="windowInfo">
      <!-- <div class="windowInfo-head">
        <h3>设备状态显示</h3>
        <div class="keyBox">
          <div class="WPZ">异常</div>
          <div class="JL">正常</div>
        </div>
      </div>-->
      控星状态
      <a-radio-group
        name="radioGroup"
        v-model="starControlStatus"
        @change="changeStarControlStatus"
      >
        <a-radio value="enable">使能</a-radio>
        <a-radio value="prohibit">禁止</a-radio>
      </a-radio-group>
      <!-- <div class="windowInfo-body">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="卫星">
            <a-table :columns="columns" :data-source="data" :pagination="false">
              <template slot="status" slot-scope="text">
                <span :class="text == 0 ? 'errRed' : ''">{{ text == 1 ? '正常' : '故障' }}</span>
              </template>
            </a-table></a-tab-pane
          >
          <a-tab-pane key="2" tab="指挥通信车" force-render>
            <a-table :columns="columns" :data-source="data1" :pagination="false">
              <template slot="status" slot-scope="text">
                <span :class="text == 0 ? 'errRed' : ''">{{ text == 1 ? '正常' : '故障' }}</span>
              </template>
            </a-table></a-tab-pane
          >
          <a-tab-pane key="3" tab="导弹">
            <a-table :columns="columns" :data-source="data2" :pagination="false">
              <template slot="status" slot-scope="text">
                <span :class="text == 0 ? 'errRed' : ''">{{ text == 1 ? '正常' : '故障' }}</span>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>-->
    </div>
  </div>
</template>

<script>
import { getAction, httpAction } from '@/api/manage.js'
export default {
  data() {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        scopedSlots: { customRender: 'status' },
        // customRender: function (text) {
        //   if (text == 0) {
        //     return '故障'
        //   } else if (text == 1) {
        //     return '正常'
        //   }
        // },
      },
    ]
    return {
      url: {
        getByConfigKey: '/systemConfig/nmcSystemConfig/getByConfigKey',
        fixedAddEntity: '/systemConfig/nmcSystemConfig/fixedAddEntity'
      },
      starControlStatus: undefined,
      columns,
      data: [{ name: '卫星', status: 1 }],
      data1: [
        { name: '车1', status: 0 },
        { name: '车2', status: 1 },
      ],
      data2: [{ name: '弹1', status: 1 }],
      statusList1: [
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
        { status: 1 },
      ],
    }
  },
  created() {
    this.getByConfigKey()
  },
  methods: {
    getByConfigKey() {
      getAction(this.url.getByConfigKey, { configKey: 'controlSatelliteConfigKey' }).then(res => {
        if (res.success) {
          console.log(res, '---------------')
          this.starControlStatus = res.result
        } else {
          this.$message.error(res.message)
        }
      })

    },
    changeStarControlStatus(val) {
      // console.log(val.target.value)
      httpAction(this.url.fixedAddEntity, {
        "configKey": "controlSatelliteConfigKey",
        "configValue": val.target.value,
      }, 'post').then(res => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    filter(val) {
      if (val == 0) {
        return '故障'
      } else if (val == 1) {
        return '正常'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.errRed {
  color: red;
}
.tableContainer {
  width: 202px;
  display: flex;
  border: solid 0.1px rgb(87, 217, 249);
  flex-wrap: wrap;
  margin: 0 auto;
  .tableItem {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: solid 0.1px rgb(87, 217, 249);
  }
}
.keyBox {
  // background: rgb(252, 249, 249);
  // position: absolute;
  // left: 45%;
  // margin: auto;
  // top: 15px;
  line-height: 32px;
  color: #fff;
  height: auto;
  display: flex;
  border-radius: 15px;
  padding: 5px;
  div {
    padding: 0 2px;
  }

  .WPZ {
    line-height: 15px;
    margin-right: 10px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: red;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .JL {
    line-height: 15px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: rgb(108, 245, 108);
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  // .WJL {
  //   background: rgb(230, 215, 19);
  // }
  // .JL {
  //   background: rgb(80, 226, 60);
  // }
  .DX {
    line-height: 15px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: rgb(119, 118, 118);
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
.windowInfo {
  min-width: 210px;

  height: 50px;
  // display: flex;
  // line-height: 50px;
  h3 {
    color: rgb(87, 217, 249);
  }
  color: #fff;
  // padding: 10px;
  // background: rgba(30, 36, 50, 0.6) !important;
  .windowInfo-head {
    display: flex;
  }
}
/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
<style lang="less">
.windowInfo .ant-tabs-nav .ant-tabs-tab {
  color: #fff !important;
}
</style>
